<template>
  <div class="wrap">
    <div class="main-content">
      <!--   歌曲图片名字作者描述   -->
      <div class="song-info">
        <div class="song-img">
          <template v-if="song.al">
            <img :src="`${song.al.picUrl}?param=130y130`"  style="box-sizeing:content-box" />
            <div class="msk"></div>
          </template>
        </div>
        <div class="song-info-right">
          <div class="song-title" v-if="song.name">
            <h1>{{ song.name }}</h1>
            <p>{{ song.alia[0] }}</p>
          </div>
          <div class="song-author" v-if="song.ar">
            <p>歌手：<a v-for="(item, index) in song.ar" :key="item.id"><i v-if="index > 0">/</i><span>{{ item.name
            }}</span></a>
            </p>
            <p>所属专辑：<a>{{ song.al.name }}</a></p>
          </div>
          <div class="song-btn">
            <el-button type="primary" icon="el-icon-video-play" size="mini" @click="changeMusic(song)">播放</el-button>
            <el-button icon="el-icon-folder-add" size="mini">收藏</el-button>
            <el-button icon="el-icon-chat-line-square" size="mini">评论</el-button>
          </div>
          <div class="song-lyric">
            <p v-for="(lyric, index) in lyricArr" :key="index" v-show="index < num">
              <span>{{ lyric[1] }}</span>
            </p>
          </div>
          <div>
            <!-- 展开 -->
            <el-button type="text" v-if="lyricArr.length > num & num === 10" @click="num = 999">展开</el-button>
            <!-- 收起 -->
            <el-button type="text" v-if="num !== 10" @click="num = 10">收起</el-button>
          </div>
        </div>
      </div>

      <Comment :type="0" :id="$route.query.ids" />
    </div>


    <div class="rightside">
      <div class="simi">
        <h2>包含这首歌的歌单</h2>
        <ul>
          <li v-for="item in simiPlaylist" :key="item.id">
            <img :src="`${item.coverImgUrl}?param=50y50`" />
            <div style="margin-left: 7px">
              <span>{{ item.name }}</span>
              <p>by {{ item.creator.nickname }}</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="simi2">
        <h2>相似歌曲</h2>
        <ul>
          <li v-for="song in simiSongs" :key="song.id">
            <div>
              <p>{{ song.name }}</p>
              <p style="color: #8c939d"><span v-for="(artist, index) in song.artists" :key="artist.id"><i
                    v-if="index > 0">/</i> {{
                        artist.name
                    }}</span>
              </p>
            </div>
            <div>
              <el-button type="text" icon="el-icon-video-play" @click="changeMusic(song)"></el-button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "SongDetail",
  data() {
    return {
      song: {},
      lyric: '',
      num: 10, // 每次展开的歌词数量
      simiPlaylist: [],
      simiSongs: []
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取歌曲数据
    async getData() {
      // 歌曲信息
      let result = await this.$API.songDetail(this.$route.query.ids);
      if (result.data.code === 200) {
        this.song = result.data.songs[0];
      }
      // 歌词
      let resutl2 = await this.$API.songLyric(this.$route.query.ids);
      if (resutl2.data.code === 200) {
        this.lyric = resutl2.data.lrc.lyric;
      }
      // 包含这首歌的歌单（相似歌单）
      let result3 = await this.$API.simiPlaylist(this.$route.query.ids);
      if (result3.data.code === 200) {
        this.simiPlaylist = result3.data.playlists;
      }
      // 相似歌曲
      let result4 = await this.$API.simiSong(this.$route.query.ids);
      if (result4.data.code === 200) {
        this.simiSongs = result4.data.songs;
      }
    },
    changeMusic(music) {
      this.$bus.$emit('changeMusic', music);
    }
  },
  computed: {
    // 计算歌词
    lyricArr() {
      let arr = this.lyric.split('\n');
      let arr2 = [];
      arr.forEach(item => {
        let arr3 = item.split(']');
        if (arr3.length > 1) {
          arr2.push(arr3);
        }
      });
      return arr2;
    }
  },
  watch: {
    "$route"() {
      this.getData();
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  width: fit-content;
  background-color: #fff;
  display: flex;
  flex-flow: row nowrap;
}

.main-content {
  width: 750px;
  padding: 20px 30px 30px 40px;

  border: {
    left: 1px solid #d2d2d2;
    right: 1px solid #d2d2d2;
    bottom: 1px solid #d2d2d2;
  }

  ;

  .song-info {
    display: flex;
    flex-flow: row nowrap;
    margin-bottom: 60px;

    .song-img {
      margin-right: 20px;
      width: 198px;
      height: 198px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: content-box;

      img {
        width: 130px;
        height: 130px;
      }

      .msk {
        width: 198px;
        height: 198px;
        background: url("../../assets/coverall.png") no-repeat -144px -584px;
        z-index: 999;
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    .song-info-right {
      flex: 1;
      display: flex;
      flex-flow: column nowrap;
      font-family: "Microsoft YaHei UI", "Microsoft YaHei", "微软雅黑", "宋体", "sans-serif";

      .song-title {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: start;

        h1 {
          font-size: 24px;
          font-weight: bold;
          color: #333;
          margin-bottom: 5px;
        }

        P {
          font-size: 14px;
          color: #BABABA;
          font-family: "Microsoft YaHei UI", "Microsoft YaHei", "微软雅黑", "宋体", "sans-serif";
        }
      }

      .song-author {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: start;
        margin: 10px 0;

        p {
          font-size: 14px;
          color: #242424;
          margin: 5px 0;

          a {
            color: #0c73c2;
          }
        }
      }

      .song-btn {
        margin-bottom: 10px;
      }

      .song-lyric {
        display: flex;
        flex-flow: column wrap;
        justify-content: space-between;
        align-items: start;

        p {
          font-size: 12px;
          color: #333;
          margin-bottom: 7px;
          font-family: 'Avenir', Helvetica, Arial, sans-serif;
        }
      }
    }
  }
}

.rightside {
  width: 270px;
  padding: 20px;

  .simi {
    margin-bottom: 20px;

    ul li {
      display: flex;
      flex-flow: row nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 10px 0;

      p {
        font-size: 12px;
        margin-top: 8px;
        color: #999;
      }
    }
  }

  .simi2 {
    margin-bottom: 20px;

    ul li {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      margin-bottom: 10px;
    }
  }

  h2 {
    font-size: 14px;
    padding-bottom: 5px;
    border-bottom: 1px solid #d3d3d3;
  }
}
</style>